<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* #div1 {
	width: 200px;
	height: 200px;
	background-color: red;
} */
</style>
</head>
<body>
	<div id="div1"
		style="width: 150px; height: 150px; background-color: red; position: relative;"></div>
	<script type="text/javascript">
		var div1 = document.getElementById('div1');
		div1.onmousedown=function(){
			/* var ol = event.clientX - div1.offsetLeft;
			var ot = event.clientY - div1.offsetTop; */
	    	document.onmousemove=function(){
	    	
	    		div1.style.left = div1.offsetLeft;     /* (event.clientX - ol) + 'px'; */
				div1.style.top =div1.offsetTop;     /* (event.clientY - ot) + 'px'; */		
			}
			document.onmouseup=function(){
				 document.onmousemove=null;
			}
		}
		
	</script>
</body>
</html>